<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link href="GangnamStyle.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.8.1.min.js"></script>
<script src="login.js"></script>
<title>Lobby</title>
<script>
$(document).ready(function(){
	
	if(!(getUsername()== null || getUsername() == "null")){
		storageLogin();
	}
	
	$("#password").keyup(function(event){
	    if(event.keyCode == 13){
	        $("#loginButton").click();
	    }
	});
	
	function getTableInfo(id) {
	$.getJSON('http://localhost:8080/Roulette/rest/lobby/tableInfo/' + id, function(data) {
		var playersHTML = "<table><tr><th width='50px'>Player</th><th>cashbuyin</th></tr>";
		var tableId = data['tableId'];
		var players = data['players'];
		var button = "<button id='goToTableButton' onclick='goToTable(";
		for(i = 0; i<players.length; i++){
			playersHTML += "<tr><td>" + players[i].username + "</td><td>" + players[i].cash + "</td></tr>" 
		}
		playersHTML += "</table>";
		if(checkLogin() == true){
			button += tableId + ")'>Go to table " + tableId + "</button";
			$('#TableInfo1').html("<h2>Table: " + tableId + "</h2><br/>" + playersHTML + "<br/>" + button);
		} else {
			$('#TableInfo1').html("<h2>Table: " + tableId + "</h2><br/>" + playersHTML);
		}
		});
	}
	$('#Table1').click(function() {
			getTableInfo(1);
	});
	$('#Table2').click(function() {
		getTableInfo(2);
	});
	$('#Table3').click(function() {
		getTableInfo(3);
	});
	$('#Table4').click(function() {
		getTableInfo(4);
	});
	$('#Table5').click(function() {
		getTableInfo(5);
	});
	$('#Table6').click(function() {
		getTableInfo(6);
	});
	
	$('#goToTable').click(function() {
		//ga naar tafel
	})
	
});

function storageLogin()
{
	$.getJSON('http://localhost:8080/Roulette/rest/lobby/login?username=' + getUsername() + "&password=" + getPassword(), function(data) {
		var username = data['username'];
		var cash = data['cashTotal'];
		if(username && cash != null){
			buildLoggedOn(username, cash);
			$('#login').hide();
			$('#loggedOn').show();
		} else {
			alert('Failed to log in, please try again');
		}
});
	
}

function login(){
	$.getJSON('http://localhost:8080/Roulette/rest/lobby/login?username=' + $('#username').val() + "&password=" + $('#password').val(), function(data) {
		var username = data['username'];
		var cash = data['cashTotal'];
		if(username && cash != null){
			buildLoggedOn(username, cash);
			$('#login').hide();
			$('#loggedOn').show();
			$('#TableInfo1').html("Select a table!");
		} else {
			alert('Failed to log in, please try again');
		}
		setLogin(username, $('#password').val());
		
		setId(data['id']);
	});
}

function logout(){
	clearLogin();
	$('#loggedOn').hide();
	$('#login').show();
	$('#goToTableButton').hide();
}


function buildLoggedOn(username, cash){
	var loggedOnText = "Username: " + username + "<br/>Cash: " + cash + "<br/><button onClick='logout()' id='logoutButton'>Log out!</button>";
	$('#loggedOn').html(loggedOnText);
}

function goToTable(id){
	window.location = "table.html?id=" + id;
}

</script>
</head>
<body id="body">
	<header>
		<div id="title">Lobby</div>
			<div id="login">
					Username: <input type="text" value="" name="username" id="username"><br /> 
					Password: <input type="password" value="" name="password" id="password"><br />
					<button id="loginButton" onclick="login()">Log in!</button>
			</div>
			<div id="loggedOn" style="display:none">
		</div>
	</header>

	<div id="body1">
		<div id="TableInfo">
			<div id="TableInfo1">
				<div id="tableId"></div>
				<div id="playerList">Select a table!</div>
			</div>
			<div id="goToTable">
				
			</div>
		</div>
		<div id="Table1">Table 1</div>
		<div id="Table2">Table 2</div>
		<div id="Table3">Table 3</div>
		<div id="Table4">Table 4</div>
		<div id="Table5">Table 5</div>
		<div id="Table6">Table 6</div>
	</div>
</body>
</html>